<template>
  <div class="main">
    <div class="refresh">
      <div v-if="cmtState" class="btns">
        <el-button @click="selectionAdopt">通过</el-button>
        <el-button @click="selectionRefuse">拒绝</el-button>
        <el-button
          style="border: 1px solid red"
          @click="selectionDel"
        >删除</el-button>
      </div>
      <div v-else />
      <svg
        viewBox="64 64 896 896"
        focusable="false"
        data-icon="reload"
        width="1em"
        height="1em"
        fill="currentColor"
        aria-hidden="true"
        @click="refreshComment"
      >
        <path
          d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"
        />
      </svg>
    </div>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="cmtLits"
      border
      style="width: 100%"
      header-align="center"
      @selection-change="handleSelectionChange"
    >
      <el-table-column fixed type="selection" width="55" />
      <el-table-column fixed prop="pass" label="状态" width="160">
        <template slot-scope="scope">
          <span
            class="ant-badge-status-dot ant-badge-status-gold"
            :style="
              scope.row.pass ? 'background: #52c41a;' : 'background: #faad14;'
            "
          />
          <span>{{ scope.row.pass ? "通过" : "未通过" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="称呼" width="160" />
      <el-table-column prop="email" label="联系方式" width="160" />
      <el-table-column prop="content" label="原始内容" width="160">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title="评论详情-原始内容"
            width="200"
            trigger="hover"
            :content="scope.row.content"
          >
            <el-button
              slot="reference"
              type="text"
              size="adopt"
            >查看内容</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="html" label="HTML内容" width="160">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title="评论详情-HTML内容"
            width="200"
            trigger="hover"
          >
            <div v-html="scope.row.html" />
            <el-button
              slot="reference"
              type="text"
              size="adopt"
            >查看内容</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="adminArticle" label="文章管理" width="160">
        <template>
          <el-button type="text" size="adopt">文章</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="createAt"
        :formatter="setDate"
        label="创建时间"
        width="160"
      />
      <el-table-column prop="replyUserName" label="父级内容" width="160">
        <template slot-scope="scope">
          <span>{{
            scope.row.replyUserName == null || scope.row.replyUserName == ""
              ? "无"
              : scope.row.replyUserName
          }}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="adopt"
            @click="adoptClick(scope.row)"
          >通过</el-button>
          <el-button
            type="text"
            size="refuse"
            @click="refuseClick(scope.row)"
          >拒绝</el-button>
          <el-button
            type="text"
            size="addCmt"
            @click="addCmtClick(scope.row)"
          >回复</el-button>
          <el-popconfirm
            placement="top"
            title="确认删除这个评论?"
            @onConfirm="delClick(scope.row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="del"
              style="margin-left: 10px"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pageSize">
      <h3 style="margin: 3px 8px 0 0">共{{ total }}条</h3>
      <el-pagination
        :current-page.sync="currentPage1"
        :page-size="12"
        background
        layout="prev, pager, next,sizes"
        :total="total"
        :page-sizes="[8, 12, 24, 36]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 回复对话框 -->
    <el-dialog title="回复评论" :visible.sync="dialogVisible" width="30%">
      <el-input v-model.trim="reply" placeholder="支持Markdown" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addComments">回 复</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      cmtState: false,
      currentPage1: 1,
      dialogVisible: false,
      reply: '',
      prantVal: {}
    }
  },
  computed: {
    ...mapState({
      cmtLits: (state) => state.comment.cmtList,
      total: (state) => state.comment.total,
      formInline: (state) => state.comment.formInline,
      loading: (state) => state.comment.loading,
      page: (state) => state.comment.page,
      pageSize: (state) => state.comment.pageSize
    })
  },
  methods: {
    ...mapMutations({
      handleSize: 'comment/handleSize'
    }),
    ...mapActions({
      // 数据请求
      cmmentList: 'comment/cmmentList',
      // 通过||拒绝 评论
      adoptComment: 'comment/adoptComment',
      // 回复评论
      addComment: 'comment/addComment',
      // 删除评论
      deleteComment: 'comment/deleteComment',
      // 多选操作
      multipleSelect: 'comment/multipleSelect'
    }),
    // 刷新评论列表
    refreshComment() {
      const { pageSize } = this
      this.cmmentList({ page: 1, pageSize })
      this.currentPage1 = 1
    },
    // 时间转换
    setDate(row, column) {
      const newdate = row[column.property]
      if (newdate === undefined) return
      return moment(newdate).format('YYYY-MM-DD HH:mm:ss')
    },
    // 每页 n 条
    handleSizeChange(val) {
      this.handleSize(val)
      const { name, pass, email } = this.formInline
      this.cmmentList({
        page: this.page,
        pageSize: this.pageSize,
        name,
        pass,
        email
      })
    },
    // 分页
    handleCurrentChange(val) {
      const { pageSize } = this
      const { name, pass, email } = this.formInline
      this.page = val
      this.cmmentList({ page: this.page, pageSize, name, pass, email })
    },
    // 通过
    async adoptClick(val) {
      const adopt = {
        val,
        adopts: true
      }
      await this.adoptComment(adopt)
      await this.handleCurrentChange(this.page)
    },
    // 拒绝
    async refuseClick(val) {
      const adopt = {
        val,
        adopts: false
      }
      await this.adoptComment(adopt)
      await this.handleCurrentChange(this.page)
    },
    // 回复
    addCmtClick(val) {
      this.prantVal = val
      this.dialogVisible = true
    },
    async addComments() {
      this.dialogVisible = false
      if (this.reply !== '') {
        const { name } = JSON.parse(localStorage.getItem('user'))
        const { hostId, parentCommentId, replyUserEmail, replyUserName, url } =
          this.prantVal
        const payload = {
          content: this.reply,
          createByAdmin: true,
          email: '4651685@qq.com',
          hostId,
          name,
          parentCommentId,
          replyUserEmail,
          replyUserName,
          url
        }
        await this.addComment(payload)
        await this.handleCurrentChange(this.page)
      }
    },
    // 删除
    async delClick(val) {
      await this.deleteComment(val)
      await this.handleCurrentChange(this.page)
    },
    // 多选框
    handleSelectionChange(val) {
      val.length > 0 ? (this.cmtState = true) : (this.cmtState = false)
      this.multipleSelection = val
    },
    // 多选通过
    selectionAdopt() {
      if (this.multipleSelection.length > 0) {
        const payload = {
          classify: 'Adopt',
          arr: this.multipleSelection
        }
        this.multipleSelect(payload)
        const page = this.page
        setTimeout(() => {
          this.handleCurrentChange(page)
        }, 300)
      }
    },
    // 多选拒绝
    selectionRefuse() {
      if (this.multipleSelection.length > 0) {
        const payload = {
          classify: 'Refuse',
          arr: this.multipleSelection
        }
        this.multipleSelect(payload)
        const page = this.page
        setTimeout(() => {
          this.handleCurrentChange(page)
        }, 300)
      }
    },
    // 多选删除
    selectionDel() {
      if (this.multipleSelection.length > 0) {
        const payload = {
          classify: 'Del',
          arr: this.multipleSelection
        }
        this.multipleSelect(payload)
        const page = this.page
        setTimeout(() => {
          this.handleCurrentChange(page)
        }, 300)
      }
    }
  },
  created() {
    const { page, pageSize } = this
    this.cmmentList({ page, pageSize })
  }
}
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;
  padding: 30px 3px;
  .pageSize {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 30px;
  }
  .refresh {
    width: 100%;
    height: 40px;
    padding: 0px 0px 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    svg {
      cursor: pointer;
    }
  }
  .ant-badge-status-dot {
    position: relative;
    top: -1px;
    display: inline-block;
    width: 6px;
    height: 6px;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 10px;
  }
}
</style>
